<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    status-icon
    :rules="rules"
    label-width="0"
    :width="'100%'"
    class="demo-ruleForm"
  >
    <!-- <div style="width: 100%; height: 30px" v-if="props.isloginfun"></div> -->
    <el-form-item prop="name" v-if="!isloginfun">
      <el-input v-model="ruleForm.name" type="text" placeholder="请输入您的昵称" />
    </el-form-item>
    <el-form-item prop="phone">
      <!-- <input type="number" v-model="ruleForm.phone" /> -->
      <el-input v-model="ruleForm.phone" type="number" placeholder="请输入您的手机号" />
    </el-form-item>
    <el-form-item prop="smsCode">
      <el-input
        v-model="ruleForm.smsCode"
        placeholder="请输入手机验证码"
        class="input-with-select"
      >
        <template #append>
          <!-- <el-button>获取手机验证码</el-button> -->
          <button :disabled="countdown > 0" @click.prevent="startCountdown">
            {{ countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码" }}
          </button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="agencyCode" v-if="!isloginfun">
      <el-input v-model="ruleForm.agencyCode" type="text" placeholder="优惠邀请码" />
    </el-form-item>
    <el-form-item v-if="!isloginfun">
      <property :obj="parentObj" @update-obj="updateParentObj"></property>
    </el-form-item>
    <el-form-item class="loginbtn">
      <button
        type="button"
        @click.prevent="submitForm(ruleFormRef)"
        class="dioa-button__root inline-flex appearance-none items-center justify-center select-none relative whitespace-nowrap align-middle transition outline-none cursor-pointer disabled:cursor-not-allowed data-loading:text-transparent h-14 w-[168px] text-lg font-medium text-black bg-neutral-30 hover:bg-neutral-40 active:bg-black active:text-white disabled:text-neutral-40 disabled:bg-neutral-30 rounded-full border-0"
      >
        {{ isloginfun ? "登录" : "立即注册" }}
      </button>
    </el-form-item>
    <el-form-item style="text-align: right">
      <a class="clickres" @click.prevent="selectTag">
        {{ isloginfun ? "立即注册" : "返回登录" }}</a
      >
    </el-form-item>
    <div class="bottom" v-if="isloginfun">
      登录即代表同意 <a>《服务协议》</a> <a>《隐私政策》</a>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, defineProps, defineEmits } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import Property from "./Property.vue";
import { ObjType, loginAndRes } from "@/common/utils/loginTpye";
import { useUserStore } from "@/store/loginStore";
import { getsms } from "@/common/loginApi";
const props = defineProps({
  isloginfun: {
    type: Boolean,
  },
});
const userStore = useUserStore()
// 与省市区组件交互
const parentObj = ref<ObjType>({ province: "", city: "" });
const updateParentObj = (newObj: ObjType) => {
  // console.log(newObj, "修改了");
  parentObj.value = newObj;
};
// 表单验证
const ruleFormRef = ref<FormInstance>();
const validateName = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入昵称"));
  } else {
    callback();
  }
};
const validatePhone = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入手机号"));
  } else if (!/1[35789]\d{9}/.test(value)) {
    callback(new Error("请输入正确的手机号"));
  } else {
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入验证码"));
  } else {
    callback();
  }
};
const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ validator: validateName, trigger: "blur" }],
  phone: [{ validator: validatePhone, trigger: "blur" }],
  smsCode: [{ validator: validatePass2, trigger: "blur" }],
});


// 获取验证码
const countdown = ref(0);
const startCountdown = () => {
  // 调用API获取验证码的逻辑
  // console.log(ruleForm.phone, "2222")
  getsms(ruleForm.phone).then(res => {
    // console.log(res.data)
    if (res.code != 200) {
      ElMessage.error(res.msg)
      // console.log(res);
    } else {
      // 启动60秒倒计时
      countdown.value = 60;
      const intervalId = setInterval(() => {
        if (countdown.value > 0) {
          countdown.value--;
        } else {
          clearInterval(intervalId);
        }
      }, 1000);
    }
  })

};

// 数据源



let ruleForm: loginAndRes = userStore.logindata;
const emit = defineEmits(["update:value"]);

const selectTag = () => {
  // console.log(props.isloginfun);
  if (props.isloginfun) {
    ruleForm = userStore.registerdata;
    emit("update:value", false);
  } else {
    ruleForm = userStore.logindata;
    emit("update:value", true);
  }
};

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // console.log(ruleForm, props.isloginfun);
      if (props.isloginfun) {
        userStore.loginFunction(ruleForm)
      } else {
        const province = parentObj.value.province
        const city = parentObj.value.city
        ruleForm.province = province
        ruleForm.city = city
        userStore.registeFunction(ruleForm)
        // const btntemp = userStore.btnis
        // console.log(btntemp, "ceshi")
      }
    } else {
      console.log("error submit!");
    }
  });
};
</script>
<style lang="scss">
.loginbtn {
  width: 100%;
}

.loginbtn button {
  width: 100%;
  height: 45px;
  background: #cc1a1c;
  color: #fff;

  &:hover {
    color: #000;
  }
}

.clickres {
  color: red;
}

.bottom {
  position: absolute;
  bottom: 30px;
  text-align: center;
}
</style>
